/* 弹性布局盒模型 */
.f-flex {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
}




.f-flex1 {
	flex: 1;
}


/* 弹性布局盒模型可换行 */
.f-rowW {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-wrap: wrap;
}



/* 水平垂直居中 */
.f-centerXY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* 上下居中 */
.f-centerY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}



/* 横向排列 */
.f-rowX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}



/* 横向排列,所有元素放置于底部 */
.f-bottomY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}



/* 左右居中 */
.f-centerX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}


/* 纵向排列 */
.f-columnY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}



/* 向左向右 */
.f-betweenX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}



/* 向上向下 */
.f-betweenY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.f-rightX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* justify-content: flex-end; */
}





// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.f-aroundX {
	display: flex;
	justify-content: space-around;
}